import React, { Component, useState, useImperativeHandle } from 'react'
import { Button, Modal, Form, Input, } from 'antd'

function Dialog(props) {
    const { closeModal, handleAdd, ModalForm, isUpdate, updateDate } = props
    const onOk = async () => {
        const res = await ModalForm.validateFields()
        if (!isUpdate) {
            handleAdd(res)
        } else {
            updateDate(res)
        }

        closeModal()
        console.log(ModalForm)
    }
    const cancel = () => {
        closeModal()
    }

    return (
        <div>
            <Modal title="Basic Modal" visible={props.visible} onCancel={cancel} onOk={onOk}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    form={ModalForm}
                >
                    <Form.Item
                        label="Name"
                        name="name"
                        rules={[{ required: true, message: 'Please input your name!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label={props.tabKey == 0 ? 'Address' : 'Email'}
                        name={props.tabKey == 0 ? 'address' : 'email'}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Age"
                        name="age"
                    >
                        <Input />
                    </Form.Item>
                </Form>

            </Modal>
        </div>
    )
}
export default Dialog